



// useState  让纯函数组件可以绑定 state 
// useRef    绑定ref   ref()
// useEffect 
import {useState , useRef } from "react"
import {fromJS} from "immutable"
export function  HooksOne(){
  let [count,setCount] = useState(100)
  let [msg, setMsg] = useState("wh2107-daydayup")
  let [ word,setWord] = useState("2107-YYDS")  
  let [data,setData] = useState(fromJS({
     num:1000
  }))
  let ele = useRef(); 
  let inp = useRef()
  const changeInpText = ()=>{
    console.log(ele)
    ele.current.style.background = "pink";
    setWord(inp.current.value)
  }
  return (
    <div ref={ele} >
      <h2> Hooks - 1 -one </h2>
      <p>useState - useRef </p>
      <h3>count --- {count} </h3>
      <h3>msg -- {msg}</h3>
      <h2>word -- {word} </h2>
      <h2 onClick={()=>setData(data.update("num",x=>x+10))} >num  -- {data.get('num')} </h2>

      <p>
        <input type="text" value={word} onChange={(e)=>setWord(e.target.value) } />
      </p>
      <p>
        <input type="text" ref={inp} onChange={ changeInpText } />
      </p>
      <hr/>
      <button onClick={ ()=>setCount(count+1)}  >count add </button>
      <button onClick={ ()=>setMsg("Are you oK???")  }  >change msg </button>

    </div>
  )
}